<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <title>帐号设置</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="keywords" content="fly,layui,前端社区">
  <meta name="description" content="Fly社区是模块化前端UI框架Layui的官网社区，致力于为web开发提供强劲动力">
  <link rel="stylesheet" href="/res/layui/css/layui.css">
  <link rel="stylesheet" href="/res/css/global.css">
</head>
<body>
<!--头部-->
<div th:replace="~{layout/head_layout :: head_layout}"></div>

<div class="layui-container fly-marginTop fly-user-main">
  <!--菜单布局-->
  <div th:replace="~{layout/user_menu_layout :: user_menu_layout}"></div>

  <div class="site-tree-mobile layui-hide">
    <i class="layui-icon">&#xe602;</i>
  </div>
  <div class="site-mobile-shade"></div>

  <div class="site-tree-mobile layui-hide">
    <i class="layui-icon">&#xe602;</i>
  </div>
  <div class="site-mobile-shade"></div>


  <div class="fly-panel fly-panel-user" pad20>
    <div class="layui-tab layui-tab-brief" lay-filter="user">
      <ul class="layui-tab-title" id="LAY_mine">
        <li class="layui-this" lay-id="info">我的资料</li>
        <li lay-id="avatar">头像</li>
        <li lay-id="pass">密码</li>
        <li lay-id="bind">帐号绑定</li>
      </ul>
      <div class="layui-tab-content" style="padding: 20px 0;">
        <div class="layui-form layui-form-pane layui-tab-item layui-show">
          <div class="layui-form">
            <div class="layui-form-item">
              <label for="L_username" class="layui-form-label">账号</label>
              <div class="layui-input-inline">
                <input type="text" id="L_username" name="email" disabled title="不可修改"
                       th:value="${session.username}" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label for="L_email" class="layui-form-label">邮箱</label>
              <div class="layui-input-inline">
                <input type="text" id="L_email" name="email" required lay-verify="email"
                       th:value="${session.user.email}" autocomplete="off"
                       class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label for="L_name" class="layui-form-label">昵称</label>
              <div class="layui-input-inline">
                <input type="text" id="L_name" name="name" required lay-verify="required"
                       th:value="${session.user.name}" autocomplete="off"
                       class="layui-input">
              </div>
              <div class="layui-inline">
                <div class="layui-input-inline">
                  <input type="radio" name="sex" value="1" th:checked="${session.user.sex==1}"
                         title="男">
                  <input type="radio" name="sex" value="2" th:checked="${session.user.sex==2}"
                         title="女">
                </div>
              </div>
            </div>
            <div class="layui-form-item">
              <label for="L_city" class="layui-form-label">城市</label>
              <div class="layui-input-inline">
                <input type="text" id="L_city" name="city" autocomplete="off"
                       th:value="${session.user.city}"
                       class="layui-input">
              </div>
            </div>
            <div class="layui-form-item layui-form-text">
              <label for="L_sign" class="layui-form-label">签名</label>
              <div class="layui-input-block">
                <textarea placeholder="随便写些什么刷下存在感" id="L_sign" name="sign" autocomplete="off"
                          th:text="${session.user.sign}" class="layui-textarea"
                          style="height: 80px;"></textarea>
              </div>
            </div>
            <div class="layui-form-item">
              <button class="layui-btn" key="set-mine" lay-filter="baseUpdate" lay-submit>确认修改
              </button>
            </div>
          </div>
        </div>

        <div class="layui-form layui-form-pane layui-tab-item">
          <div class="layui-form-item">
            <div class="avatar-add">
              <p>建议尺寸168*168，支持jpg、png、gif，最大不能超过500KB</p>
              <button type="button" class="layui-btn upload-img" id="update-img">
                <i class="layui-icon">&#xe67c;</i>上传头像
              </button>
              <img id="set_avatar"
                   th:src="${session.user.imgUrl}">
              <span class="loading"></span>
            </div>
          </div>
        </div>

        <div class="layui-form layui-form-pane layui-tab-item">
          <form action="/user/repass" method="post">
            <div class="layui-form-item">
              <label for="L_nowpass" class="layui-form-label">当前密码</label>
              <div class="layui-input-inline">
                <input type="password" id="L_nowpass" name="nowpass" required lay-verify="required"
                       autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label for="L_pass" class="layui-form-label">新密码</label>
              <div class="layui-input-inline">
                <input type="password" id="L_pass" name="pass" required lay-verify="required"
                       autocomplete="off" class="layui-input">
              </div>
              <div class="layui-form-mid layui-word-aux">6到16个字符</div>
            </div>
            <div class="layui-form-item">
              <label for="L_repass" class="layui-form-label">确认密码</label>
              <div class="layui-input-inline">
                <input type="password" id="L_repass" name="repass" required lay-verify="required"
                       autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <button class="layui-btn" key="set-mine" lay-filter="updatePassword" lay-submit>确认修改
              </button>
            </div>
          </form>
        </div>

        <div class="layui-form layui-form-pane layui-tab-item">
          <ul class="app-bind">
            <li class="fly-msg app-havebind">
              <i class="iconfont icon-qq"></i>
              <span>已成功绑定，您可以使用QQ帐号直接登录Fly社区，当然，您也可以</span>
              <a href="javascript:;" class="acc-unbind" type="qq_id">解除绑定</a>

              <!-- <a href="" onclick="layer.msg('正在绑定微博QQ', {icon:16, shade: 0.1, time:0})" class="acc-bind" type="qq_id">立即绑定</a>
              <span>，即可使用QQ帐号登录Fly社区</span> -->
            </li>
            <li class="fly-msg">
              <i class="iconfont icon-weibo"></i>
              <!-- <span>已成功绑定，您可以使用微博直接登录Fly社区，当然，您也可以</span>
              <a href="javascript:;" class="acc-unbind" type="weibo_id">解除绑定</a> -->

              <a href="" class="acc-weibo" type="weibo_id"
                 onclick="layer.msg('正在绑定微博', {icon:16, shade: 0.1, time:0})">立即绑定</a>
              <span>，即可使用微博帐号登录Fly社区</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="fly-footer">
  <p><a href="http://fly.layui.com/" target="_blank">Fly社区</a> 2017 &copy; <a
      href="http://www.layui.com/" target="_blank">layui.com 出品</a></p>
  <p>
    <a href="http://fly.layui.com/jie/3147/" target="_blank">付费计划</a>
    <a href="http://www.layui.com/template/fly/" target="_blank">获取Fly社区模版</a>
    <a href="http://fly.layui.com/jie/2461/" target="_blank">微信公众号</a>
  </p>
</div>

<script src="/res/layui/layui.js"></script>
<script>
  //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
  layui.use(['element', 'form', 'upload', 'layer', 'jquery'], function () {
    var element = layui.element;
    var form = layui.form;
    var upload = layui.upload;
    var layer = layui.layer;
    var $ = layui.jquery;

    //监听提交
    form.on('submit(baseUpdate)', function (data) {
      // layer.msg(JSON.stringify(data.field));
      $.post({
        data: data.field,
        url: '/user/updateBaseInfo',
        success: function (data) {
          if (data.code == 0) {
            layer.msg('更新资料成功！')
            window.setTimeout("window.location.reload()", 1500);
          } else {
            layer.msg(data.message)
          }
        }
      });
      return false;
    });
    form.on('submit(updatePassword)', function (data) {
      // layer.msg(JSON.stringify(data.field));
      $.post({
        data: data.field,
        url: '/user/updatePassword',
        success: function (data) {
          if (data.code == 0) {
            layer.msg(data.message)
          } else {
            layer.msg(data.message)
          }
        }
      });
      return false;
    });

    //执行实例
    var uploadInst = upload.render({
      elem: '#update-img' //绑定元素
      , size: 512
      , acceptMime: 'image/*'
      , url: '/user/updateImg' //上传接口
      , done: function (res) {
        //上传完毕回调
        console.log(res)
        if (res.code == 0) {
          $('#head_layout_avatar').attr('src', res.data)
          $('#set_avatar').attr('src', res.data)
          layer.msg('更新头像成功！')
        } else {
          layer.msg(res.data)
        }
      }
      , error: function () {
        //请求异常回调
      }
    });
  });
</script>

</body>
</html>
